<!DOCTYPE html>
<html>
<head>
  <title></title>

  <script type="text/javascript" src="javascripts/lib/pixi/pixi.js"></script>

</head>
<body>

<script type="text/javascript">
  var app = new PIXI.Application(800, 450, {
    backgroundColor: 0x000000
  });
  document.body.appendChild(app.view);

  var stage = app.stage;
  var screen = app.screen;
  var ticker = app.ticker;

  // 设置缩放模式
  // NEAREST 像素风格
  // LINEAR 模糊风格
  PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;

  var ctn = new PIXI.Container();
  stage.addChild(ctn);

  var tex = null;
  var goblinImg = new Image();
  goblinImg.src = 'images/goblin.png';
  goblinImg.onload = function () {
    tex = PIXI.Texture.fromImage('images/goblin.png');

    for (var i = 0; i < 9; i++) {
      var goblin = new PIXI.Sprite(tex);
      goblin.position.set(i % 3 * 47, Math.floor(i / 3) * 76);
      ctn.addChild(goblin)
    }

    ctn.pivot.set(ctn.width / 2, ctn.height / 2);
    ctn.position.set(screen.width / 2, screen.height / 2);
    ticker.add(function (delta) {
      ctn.rotation += 0.01 * delta;
    })
  }

</script>

</body>
</html>